<template>
  <div>
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-row :gutter="5">
        <!--    分类信息-->
        <el-col :span="8">
          <el-card style="height: 760px; overflow: auto">
            <div slot="header" class="search-header">
              <div class="show_title">案卷类别：</div>
<!--              <el-input-->
<!--                v-model="filterText"-->
<!--                placeholder="搜索分类"-->
<!--                clearable-->
<!--                @keyup.enter.native="searchClass"-->
<!--                class="my_input"-->
<!--              />-->
<!--              <div class="button-group">-->
<!--                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchClass">搜索</el-button>-->
<!--              </div>-->
            </div>
            <div class="newTree" style="margin-top: 10px;">
              <el-tree v-if="classList.length > 0" class="custom-tree" :data="classList"
                       :props="{ label: 'archiveCtgName', children: 'children' }" :default-expand-all="false"
                       :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick"
                       highlight-current ></el-tree>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="5">
            <!--    案卷信息-->
            <el-col :span="16" >
              <el-card style="height: 760px" v-loading="volumeLoading">
                <div slot="header" class="search-header">
                  <div class="show_title">案卷目录：</div>
                  <el-input v-model="volumeQueryParams.vname" placeholder="搜索案卷" clearable
                            @keyup.enter.native="searchVolume" class="my_input"/>
                  <div class="button-group">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="searchVolume"
                               style="margin-left: 10px">搜索
                    </el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetVolume">重置</el-button>
                  </div>
                </div>
                <div class="engs-container" ref="volumeContainer">
                  <div
                    class="eng-row"
                    v-for="volume in volumeList"
                    :key="volume.id"
                    @click="selectVolume(volume)"
                    :class="{ selected: volume === selectedVolume }"
                  >
                    <i class="folder-icon volume-folder-icon"></i>
                    <div slot="reference" class="name-wrapper">
                      <span size="medium" class="folder-name" style="display:inline-block;width:100%;word-wrap:break-word;white-space:normal;">{{ volume.vname }}</span>
                    </div>
                  </div>
                </div>
                <div class="pagination-container">
                  <!-- 分页信息 -->
                  <el-pagination @size-change="handleSizeChangeVolume" @current-change="handleCurrentChangeVolume"
                                 :current-page.sync="volumeQueryParams.pageNum"
                                 :page-size.sync="volumeQueryParams.pageSize"
                                 layout="total, sizes, prev, pager, next, jumper" :total="volumeTotal"></el-pagination>
                </div>
              </el-card>
            </el-col>
            <!--    文件信息-->
            <el-col :span="8" >
              <el-card style="height: 760px" v-loading="fileLoading">
                <div slot="header" class="search-header">
                  <div class="show_title button-group" style="margin-bottom: 5px">文件列表：</div>
                  <div class="button-group" style="margin-left: auto;">
                    <el-button type="primary" size="mini" @click="downloadFiles" v-if="downloadFlag">下载</el-button>
                    <el-button type="primary" size="mini" @click="downloadChange" v-if="fileList.length > 0">
                      {{ downloadFlag ? '取消' : '批量下载' }}
                    </el-button>
                  </div>
                </div>
                <div class="volume-container" ref="fileContainer">
                  <div class="eng-row" v-for="file in fileList" :key="file.id" @click="selectFile(file)"
                       @dblclick="openFile(file)" :class="{ selected: file === selectedFile }">
                    <input type="checkbox" v-model="file.selected" @click.stop="selectFiles(file)" v-if="downloadFlag"/>
                    <i class="folder-icon file-folder-icon"></i>
                    <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ file.filename }}</span>
                  </div>
                </div>
                <div class="pagination-container">
                  <!-- 分页信息 -->
                  <el-pagination @size-change="handleSizeChangeFile" @current-change="handleCurrentChangeFile"
                                 :current-page.sync="fileQueryParams.pageNum" :page-size.sync="fileQueryParams.pageSize"
                                 layout="total, prev, pager, next" :total="fileTotal"></el-pagination>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>

    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card>
        <el-row v-show="currentInfo === 'volume'">
          <el-col :span="24">
            <volume-info :volume-info="selectedVolume" @updateVolumeInfo="getVolumeList"></volume-info>
          </el-col>
        </el-row>

        <el-row v-show="currentInfo === 'file'">
          <el-col :span="24">
            <file-info :file-info="selectedFile" @updateFileInfo="getFileList"></file-info>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <!--    MP4预览-->
    <el-dialog :visible.sync="videoDialogVisible" center v-loading="loadingMp4" title="文件详情"
               :before-close="handleVideoDialogClose" v-dialog-drag v-dialog-drag-width v-dialog-drag-height :close-on-click-modal = "false">
      <video :src="videoUrl"
             autoplay="autoplay"
             ref="vueRef"
             controls width="100%"
             style="max-height:70vh">
        Your browser does not support the video tag.
      </video>
    </el-dialog>
    <!--    PDF预览-->
    <el-dialog :visible.sync="pdfDialogVisible" title="文件详情" :width="dialogWidth" center v-dialog-drag v-dialog-drag-width v-dialog-drag-height :close-on-click-modal = "false">
      <embed :src="pdfUrl" type="application/pdf" width="100%" style="height: 80vh">
    </el-dialog>
    <!--    图片预览-->
    <el-image-viewer v-if="imgDialogVisible" :zIndex="Number(99999)" :url-list="canvasList"
                     :on-close="closeImgViewer"/>
  </div>
</template>

<script>
import {getModuleVolumeInfoByIdClass, listVolumeinfo} from "@/api/system/volumeinfo";
import {downloadMore, getFile, getPdf, getTiff, getType, isPdf, listFileInfo} from "@/api/system/fileinfo";
import EngInfo from "@/views/system/search/engInfo";
import VolumeInfo from "@/views/system/search/volumeInfo";
import FileInfo from "@/views/system/search/fileInfo";
import {listCtg} from "@/api/system/ctg";
import Tiff from 'tiff.js';

export default {
  components: {
    EngInfo,
    VolumeInfo,
    FileInfo,
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      // 类别表格数据
      classList: [],

      engList: [], //工程列表
      volumeList: [], //案卷列表
      fileList: [], //文件列表

      engTotal: 0, //工程总数
      volumeTotal: 0, //案卷总数
      fileTotal: 0, //文件总数

      selectedEng: null,
      selectedVolume: null,
      selectedFile: null,
      currentInfo: "volume",
      ifDelete: 0,

      volumeQueryParams: {
        pageNum: 1,
        pageSize: 20,
        regprojid: null,
        vname: null,
      },
      fileQueryParams: {
        pageNum: 1,
        pageSize: 20,
        volumeid: null,
        filename: null,
      },

      engLoading: false,
      volumeLoading: false,
      fileLoading: false,

      blobImage: "", //图片url
      pdfUrl: "", // 存储PDF文件的URL地址
      videoDialogVisible: false, // 控制弹窗的显示与隐藏
      loadingMp4: false, //MP4加载动画
      videoUrl: "", // 存储视频文件的URL地址
      pdfDialogVisible: false, // 控制弹窗的显示与隐藏
      imgDialogVisible: false, // 控制弹窗的显示与隐藏
      dialogWidth: "70%", // 弹窗的宽度
      dialogHeight: "80vh",
      selectedFiles: [], // 存储被选中的文件的数组
      downloadFlag: false, //下载显示勾选框
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询类别列表 */
    getList() {
      this.loading = true;
      console.log(111111)
      listCtg(this.queryParams).then((response) => {
        this.classList = this.handleTree(
          response.data,
          "archiveCtgNo",
          "parentNo"
        );
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 过滤节点 */
    filterNode(value, data) {
      if (!value || !data.archiveCtgName) return true;
      return data.archiveCtgName.indexOf(value) !== -1;
    },
    /** 节点点击事件处理 */
    handleNodeClick(data) {
      // 递归查找所有最小类别节点
      const smallestClasses = this.findSmallestClasses(data);
      this.ifDelete = 1;
      this.volumeList = {};
      this.volumeTotal = 0;
      this.fileList = {};
      this.fileTotal = 0;
      this.selectedVolume = {};
      this.selectedFile = {};
      this.volumeQueryParams = {};
      // 处理最小类别节点列表，例如打印或进行其他操作
      // console.log("最小类别列表：", smallestClasses);
      if (smallestClasses.length === 1) {
        let query = {archiveCtgName: data.archiveCtgName}
        listCtg(query).then((response) => {
          this.volumeQueryParams.vtype = response.data[0].archiveCtgNo;
          this.volumeQueryParams.pageSize = 20;
          this.getVolumeList();
        })
      }
      // console.log("分类数据类型2：", this.volumeQueryParams.volumeno)
      // console.log("类别数据：", data.className.match(/([A-Z])\.(\d+)\.(\d+)/))
      // console.log("当前查询类别：", smallestClasses[0])
      // console.log("当前查询类别：", this.engQueryParams)

      // getClass(smallestClasses[0]).then(res => {
      //   this.volumeQueryParams.volumeno = res.data.className.replace(/[\W_]+/g, '');
      //   this.getVolumeList();
      // })
    },
    /** 递归查找最小类别节点 */
    findSmallestClasses(node) {
      if (!node || !node.children || node.children.length === 0) {
        // 如果节点为空或没有子节点，则当前节点为最小类别
        return [node.classId];
      }
      let smallestClasses = [];
      for (const child of node.children) {
        const childSmallestClasses = this.findSmallestClasses(child);
        smallestClasses = smallestClasses.concat(childSmallestClasses);
      }
      return smallestClasses;
    },
    downloadFile() {
      // 实现下载文件的逻辑
      const link = document.createElement("a");
      link.href = this.blobImage;
      link.download = "file.jpg";
      link.click();
    },
    printFile() {
      // 实现打印文件的逻辑
      const printWindow = window.open("", "_blank");
      printWindow.document.write(
        `<img src="${this.blobImage}" style="max-width: 100%; height: auto;">`
      );
      printWindow.document.close();
      printWindow.print();
    },
    //获取案卷信息
    getVolumeList() {
      this.volumeLoading = true;
      this.fileList = [];
      console.log(this.volumeQueryParams)
      listVolumeinfo(this.volumeQueryParams).then((response) => {
        setTimeout(() => {
          this.volumeList = response.rows;
          this.volumeTotal = response.total;
          this.volumeLoading = false;
          console.log(this.volumeList)
        }, 300);
      }).catch((error) => {
        this.$message.error("获取案卷信息失败:" + error);
        this.volumeLoading = false;
      });
    },
    searchVolume() {
      this.volumeQueryParams.pageNum = 1;
      this.getVolumeList();
    },
    resetVolume() {
      // this.volumeQueryParams.regprojid = null
      this.ifDelete = 1; // 增加 ifDelete 的值，触发子组件的 ifDel 属性变化
      this.volumeQueryParams.vname = null;
      this.fileList = [];
      this.fileTotal = 0;
      this.selectedVolume = {};
      this.selectedFile = {};
      this.getVolumeList();
    },
    selectVolume(volume) {
      this.ifDelete = 0;
      this.selectedVolume = volume;
      this.currentInfo = "volume";
      this.fileQueryParams.volumeid = volume.id;
      this.downloadFlag = false;
      this.getFileList();
    },
    handleSizeChangeVolume(pageSize) {
      this.volumeQueryParams.pageSize = pageSize;
      this.getVolumeList();
    },
    handleCurrentChangeVolume(currentPage) {
      this.volumeQueryParams.pageNum = currentPage;
      this.getVolumeList();
    },
    handleVideoDialogClose(done) {
      this.$refs.vueRef.pause();
      done(); // 调用 done() 完成弹窗的关闭操作
    },
    closeImgViewer() {
      this.imgDialogVisible = false
    },
    openFile(file) {
      getType(file).then((response) => {
        const fileType = response.toLowerCase(); // 转换为小写以确保比较不区分大小写
        if (fileType === 'pdf') {
          this.openPDF(file);
        } else if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'tif' || fileType === 'gif') {
          this.openImg(file);
        } else if (fileType === 'tiff') {
          this.openTiff(file);
        } else if (fileType === 'mp4') {
          this.openMp4(file);
        }
      });
    },
    //打开图片
    openImg(file) {
      this.canvasList = [];
      this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
      getPdf(this.fileForm)
        .then((response) => {
          const blob = new Blob([response], {type: "image/jpeg"});
          this.blobImage = URL.createObjectURL(blob);
          this.canvasList.push(URL.createObjectURL(blob))
          this.imgDialogVisible = true; // 显示弹窗
        })
        .catch((error) => {
          console.error("获取图片时出错:", error);
        });
    },
    openTiff(file) {
      this.canvasList = [];
      this.fileForm = file;
      getPdf(this.fileForm).then((response) => {
        var tiff = new Tiff({buffer: response})
        for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
          tiff.setDirectory(i)
          var imgs = tiff.toDataURL() // 转化成base64
          if (imgs) {
            this.canvasList.push(imgs)
            this.imgDialogVisible = true;
          }
        }
        console.log(this.canvasList)
      }).catch((error) => {
        console.error("获取图片时出错:", error);
        // 可以添加错误处理逻辑，比如显示一个错误提示框等
      });
    },
    //打开PDF
    openPDF(file) {
      this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
      getPdf(this.fileForm)
        .then((response) => {
          const blob = new Blob([response], {type: "application/pdf"});
          this.pdfUrl = URL.createObjectURL(blob);
          this.pdfDialogVisible = true; // 显示弹窗
        })
        .catch((error) => {
          console.error("Error occurred while fetching the PDF:", error);
          // 可以添加错误处理逻辑，比如显示一个错误提示框等
        });
    },
    openMp4(file) {
      this.videoDialogVisible = true; // 显示弹窗
      this.loadingMp4 = true;
      getPdf(file).then((response) => {
        const blob = new Blob([response], {type: "video/mp4"});
        this.videoUrl = URL.createObjectURL(blob);
      }).catch((error) => {
        console.error("获取文件时出错:", error);
      });
      this.loadingMp4 = false;
    },
    getFileList() {
      this.fileLoading = true;
      listFileInfo(this.fileQueryParams).then((response) => {
        response.rows.forEach((file) => {
          file.selected = false; // 为每个数据对象添加selected属性，初始值为false
        });
        setTimeout(() => {
          this.fileList = response.rows;
          this.fileTotal = response.total;
          this.fileLoading = false;
        }, 300);
      }).catch((error) => {
        this.$message.error("获取文件信息失败:" + error);
        this.fileLoading = false;
      });
    },
    selectFile(file) {
      this.selectedFile = file;
      this.currentInfo = "file";
    },
    //选中多个文件
    selectFiles(file) {
      // 如果文件已经选中，取消选中并从selectedFiles数组中移除
      const index = this.selectedFiles.findIndex(selectedFile => selectedFile.id === file.id);
      if (file.selected) {
        file.selected = false;
        if (newdata !== -1) {
          this.selectedFiles.splice(newdata, 1); // 使用splice方法移除指定索引的元素
        }
      } else {
        // 如果文件未选中，选中并添加到selectedFiles数组中
        file.selected = true;
        this.selectedFiles.push(file);
      }
    },
    //展开/关闭下载
    downloadChange() {
      this.fileList.forEach((file) => {
        file.selected = false; // 为每个数据对象添加selected属性，初始值为false
      });
      this.selectedFiles = [];
      this.downloadFlag = !this.downloadFlag;
    },
    // 下载单个文件名打开文件
    downloadFiles() {
      if (this.selectedFiles.length === 0) {
        this.$message({
          message: '请先选择要下载的文件！',
          type: 'warning'
        });
      } else if (this.selectedFiles.length === 1) {
        this.selectedFiles.forEach(file => {
          this.downloadOneFile(file);
        })
      } else {
        let ids = [];
        this.selectedFiles.forEach(file => {
          ids.push(file.id)
        })
        downloadMore(ids).then((response) => {
          // 处理接收到的二进制ZIP文件数据
          const blob = new Blob([response], {type: "application/zip"});
          const url = window.URL.createObjectURL(blob);
          // 创建一个下载链接并触发点击以下载ZIP文件
          const a = document.createElement('a');
          a.href = url;
          a.download = 'downloaded.zip';
          a.style.display = 'none';
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        });
      }
    },
    // 下载单个文件名打开文件
    downloadOneFile(file) {
      getType(file).then((response) => {
        const fileType = response.toLowerCase();
        getPdf(file).then( res => {
          // 处理接收到的二进制ZIP文件数据
          const blob = new Blob([res], {type: "application/pdf"});
          const url = window.URL.createObjectURL(blob);
          // 创建一个下载链接并触发点击以下载ZIP文件
          const a = document.createElement('a');
          a.href = url;
          let dotIndex = file.filename.lastIndexOf('.');
          if (dotIndex !== -1) {
            a.download = file.filename.slice(0, dotIndex) + "." + fileType;
          }else{
            a.download = file.filename + "." + fileType;
          }
          a.style.display = 'none';
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        })
      })
    },
    handleSizeChangeFile(pageSize) {
      this.fileQueryParams.pageSize = pageSize;
      this.getFileList();
    },
    handleCurrentChangeFile(currentPage) {
      this.fileQueryParams.pageNum = currentPage;
      this.getFileList();
    },
  },
};

</script>

<style>
/* 公共样式 */
.search-header {
  display: flex;
  align-items: center;
}

.my_input {
  margin-left: auto;
  width: 37%;
}

.dialog-content {
  display: flex;
  flex-direction: column;
}

.my_button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-left: 85%;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.eng-container {
  height: 240px;
  overflow-y: auto;
}

.volume-container {
  height: 600px;
  overflow-y: auto;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.eng-row:hover {
  cursor: pointer;
  background-color: #e5f3ff;
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show_title {
  font-weight: bold;
  font-size: 1.2rem;
  color: rgb(26, 115, 198);
}

.dialog-content {
  display: flex;
  flex-direction: column;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* 不同图标的样式 */
.eng-folder-icon {
  background-image: url("~@/assets/icons/folder/eng-icon.png");
}

.volume-folder-icon {
  background-image: url("~@/assets/icons/folder/volume-icon.png");
}

.file-folder-icon {
  background-image: url("~@/assets/icons/folder/file-icon.png");
}

/* 选中状态的样式 */
.selected {
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
  background-color: #cce8ff;
}

.newTree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  /* 设置背景颜色 */
  background-color:#ffffff; /* 透明度为0.2的skyblue */
  /* 设置节点字体颜色 */
  color: #409eff;
  /* 设置字体加粗 */
  font-weight: bold;
  white-space: normal;
  display: inline-block;
  word-wrap: break-word;
}

.custom-tree .el-tree-node__content {
  white-space: normal;
  display: inline-block;
  word-wrap: break-word;
  /*display: flex;*/
  /*align-items: center;*/
}
</style>

